<template>
    <div class="agreement-continter">

        <div class="card">
            <div class="title"> 兰大校园预约服务协议</div>
            <!-- 中间内容 -->
            <div class="text">
                一、本协议所述预约须使用有效身份证完成实名认证，入校刷身份证核验身份。<br>
                二、进校人员须遵守学校管理规定，不得妨害学校正常管理，不得扰乱学校正常秩序，对违反者将取消入校权限。<br>
                三、进校车辆必须遵守《兰州大学机动车辆通行管理暂行办法》、《兰州大学机动车辆收费管理暂行办法》的规定。<br>
                四、兰州大学除法律法规规定的特殊情况外不会向任何公司、组织和个人分享、转让、披露您个人的认证信息。<br>
                五、校园预约的所有权、运作权、解释权归属于兰州大学。<br>
                欢迎您使用兰州大学“校园预约”! <br>
            </div>
        </div>
        <div class="chekbox">
            <a-checkbox @change="onChange" style="font-size: 12px;padding-top: 15px; width: 100%; text-align: center;">
                <span> 我已阅读同意<a href="#">《兰大校园预约服务协议》</a></span>
            </a-checkbox>
            <a-button type="primary" style="margin-top: 25px;width: 100%;border-radius: 20px;height: 45px;"
                @click="getHasAgreedApi" :disabled="isShow">
                继续
            </a-button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isShow: true
        }
    },
    methods: {
        onChange(e) { //勾选协议才允许进入认证路由
            if (e.target.checked) {
                this.isShow = false
            } else {
                this.isShow = true
            }
        },
        //同意协议进入实名认证
        getHasAgreedApi() {
            this.$router.push('/realname')
        }

    }
}
</script>

<style lang="scss" scoped>
.agreement-continter {
    width: 100%;
    height: auto;
    margin: auto;
    overflow: hidden;


    .card {
        width: 90%;
        height: 70vh;
        overflow: auto;
        /* 添加滚动条 */
        background-color: #ffffff;
        border-radius: 5px;
        box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.4);
        margin: 20px auto 10px auto;
        position: relative;

        .title {
            width: 90%;
            position: fixed;
            padding-top: 20px;
            height: 50px;
            text-align: center;
            color: #000;
            font-weight: 700;
            font-size: 15px;
            background-color: #fff;
            text-align: center;
            padding-bottom: 10px;
            margin: auto;
        }

        .text {
            font-weight: bold;
            font-size: 12px;
            line-height: 30px;
            padding: 50px 10px 10px 10px;
        }
    }

    .chekbox {
        width: 90%;
        font-size: 12px;
        margin: auto;

        .agree {
            font-size: 13px;
            font-weight: 400;
            padding-top: 10px;
        }

        a {
            font-size: 12px;
        }
    }
}
</style>